import React from "react";
import {Form, Input, Button, Select, InputNumber, Col, Checkbox, Row, Switch, Spin} from 'antd';
import API from '../../api/api';
import PicturesWall from "./PicturesWall";
const { Option } = Select;
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 8,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
let imageUrl = null;
let defaultImageUrl = null;
export default class LinkUpdate extends React.Component {
    constructor(props) {
        super(props);
        let type = null;
        console.log(this.props.data)
        if(this.props.data.type=="链接"){
            type="link"
        }else if(this.props.data.type=="轮播图"){
            type="slideshow"
        }else if(this.props.data.type=="小图片"){
            type="small"
        }

        this.state={
            sortNum:this.props.data.sortNum,
            spinStatus:false,
            type:type,
            linkId:this.props.data.key,
            name:this.props.data.name,
            //更改默认显示的链接url
            defaultLink:this.props.data.link,
            defaultChecked:this.props.data.checked,
            //默认显示的图片url
            defaultImageUrl:this.props.data.image_url
        }
        imageUrl = this.props.data.image_url;
        defaultImageUrl = this.props.data.image_url;
    }
    //文件上传默认显示的内容
    obj = {uid:1,status:"done",url:this.props.data.image_url}
    //是否执行了刷新
    hasFlashed = false;
    //表单对象
    formRef = React.createRef();

    result = null;

    getImageUrl(url) {
        if (url == "") {
            imageUrl = defaultImageUrl
        } else imageUrl = url
    }

    onFinish = (values) => {
        console.log(values)
        values.image_url = imageUrl;
        if(values.link!=undefined && values.link!="" && values.link.match(/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|\:|\&|-)+)/g)==null){
            alert("鏈接必須含有http://或https://前綴")
            return;
        }
        //图片链接的话，图片一定要有，链接可以没有
        if(values.sortNum==this.props.data.sortNum){
            if(this.state.type!="link"){
                if(imageUrl == defaultImageUrl){
                    if(values.link==undefined && values.openNewTab==undefined){
                        alert("未做修改")
                        return
                    }
                    else if(values.link==undefined){
                        if(this.state.defaultLink==null){
                            values.link = `<img src=${values.image_url}>`
                        }else {
                            if(values.openNewTab==true) {
                                values.link = `<a target="_blank" href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            } else {
                                values.link = `<a href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            }
                        }
                    } else if(values.link==""){
                        values.link = `<img src=${values.image_url}>`
                    } else {
                        if(values.openNewTab==undefined) {
                            if(this.state.defaultChecked) {
                                values.link = `<a target="_blank" href=${values.link} ><img src=${values.image_url}></a>`
                            } else if(!this.state.defaultChecked){
                                values.link = `<a href=${values.link} ><img src=${values.image_url}></a>`
                            }
                        } else if(values.openNewTab==true) {
                            values.link = `<a target="_blank" href=${values.link} ><img src=${values.image_url}></a>`
                        } else if(values.openNewTab==false){
                            values.link = `<a href=${values.link} ><img src=${values.image_url}></a>`
                        }
                    }
                }else {
                    if(values.link==undefined && values.openNewTab==undefined){
                        if(this.state.defaultLink==null){
                            values.link = `<img src=${values.image_url}>`
                        }else {
                            if(this.state.defaultChecked) {
                                values.link = `<a target="_blank" href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            } else if(!this.state.defaultChecked){
                                values.link = `<a href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            }
                        }
                    } else if(values.link==undefined){
                        if(this.state.defaultLink==null){
                            values.link = `<img src=${values.image_url}>`
                        }else {
                            if(values.openNewTab==true) {
                                values.link = `<a target="_blank" href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            } else {
                                values.link = `<a href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            }
                        }
                    } else if(values.link==""){
                        values.link = `<img src=${values.image_url}>`
                    } else {
                        if(values.openNewTab==undefined) {
                            if(this.state.defaultChecked) {
                                values.link = `<a target="_blank" href=${values.link} ><img src=${values.image_url}></a>`
                            } else if(!this.state.defaultChecked){
                                values.link = `<a href=${values.link} ><img src=${values.image_url}></a>`
                            }
                        } else if(values.openNewTab==true) {
                            values.link = `<a target="_blank" href=${values.link} ><img src=${values.image_url}></a>`
                        } else if(values.openNewTab==false) {
                            values.link = `<a href=${values.link} ><img src=${values.image_url}></a>`
                        }
                    }
                }
            } else if(this.state.type=="link"){
                if((values.name==undefined || values.name=="") && values.link==undefined && values.openNewTab==undefined){
                    alert("未修改内容")
                    return;
                }else if(values.name==undefined || values.name==""){
                    values.name=this.state.name
                    if(values.link==undefined){
                        if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else {
                            values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else if(values.link==""){
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else {
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${values.link} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${values.link} >${values.name}</a>`
                        }
                    }
                }else {
                    if(values.link==undefined){
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else if(values.link==""){
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else {
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${values.link} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${values.link} >${values.name}</a>`
                        }
                    }
                }
            }
        }
        else if(values.sortNum=="" || values.sortNum==null){
            values.sortNum=-1
            if(this.state.type!="link"){
                if(imageUrl == defaultImageUrl){
                    if(values.link==undefined && values.openNewTab==undefined){
                        values.image_url=undefined
                    }
                    else if(values.link==undefined){
                        if(this.state.defaultLink==null){
                            values.link = `<img src=${values.image_url}>`
                        }else {
                            if(values.openNewTab==true) {
                                values.link = `<a target="_blank" href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            } else {
                                values.link = `<a href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            }
                        }
                    } else if(values.link==""){
                        values.link = `<img src=${values.image_url}>`
                    } else {
                        if(values.openNewTab==undefined) {
                            if(this.state.defaultChecked) {
                                values.link = `<a target="_blank" href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            } else if(!this.state.defaultChecked){
                                values.link = `<a href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            }
                        } else if(values.openNewTab==true) {
                            values.link = `<a target="_blank" href=${values.link} ><img src=${values.image_url}></a>`
                        } else if(values.openNewTab==false){
                            values.link = `<a href=${values.link} ><img src=${values.image_url}></a>`
                        }
                    }
                }else {
                    if(values.link==undefined && values.openNewTab==undefined){
                        if(this.state.defaultLink==null){
                            values.link = `<img src=${values.image_url}>`
                        }else {
                            if(this.state.defaultChecked) {
                                values.link = `<a target="_blank" href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            } else if(!this.state.defaultChecked){
                                values.link = `<a href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            }
                        }
                    } else if(values.link==undefined){
                        if(this.state.defaultLink==null){
                            values.link = `<img src=${values.image_url}>`
                        }else {
                            if(values.openNewTab==true) {
                                values.link = `<a target="_blank" href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            } else {
                                values.link = `<a href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            }
                        }
                    } else if(values.link==""){
                        values.link = `<img src=${values.image_url}>`
                    } else {
                        if(values.openNewTab==undefined) {
                            if(this.state.defaultChecked) {
                                values.link = `<a target="_blank" href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            } else if(!this.state.defaultChecked){
                                values.link = `<a href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            }
                        } else if(values.openNewTab==true) {
                            values.link = `<a target="_blank" href=${values.link} ><img src=${values.image_url}></a>`
                        } else if(values.openNewTab==false) {
                            values.link = `<a href=${values.link} ><img src=${values.image_url}></a>`
                        }
                    }
                }
            } else if(this.state.type=="link"){
                if((values.name==undefined || values.name=="") && values.link==undefined && values.openNewTab==undefined){
                    values.name=undefined;
                }else if(values.name==undefined || values.name==""){
                    values.name=this.state.name
                    if(values.link==undefined){
                        if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else {
                            values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else if(values.link==""){
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else {
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${values.link} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${values.link} >${values.name}</a>`
                        }
                    }
                }else {
                    if(values.link==undefined){
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else if(values.link==""){
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else {
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${values.link} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${values.link} >${values.name}</a>`
                        }
                    }
                }
            }
        }
        else{
            if(this.state.type!="link"){
                if(imageUrl == defaultImageUrl){
                    if(values.link==undefined && values.openNewTab==undefined){
                        values.image_url=undefined
                    }
                    else if(values.link==undefined){
                        if(this.state.defaultLink==null){
                            values.link = `<img src=${values.image_url}>`
                        }else {
                            if(values.openNewTab==true) {
                                values.link = `<a target="_blank" href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            } else {
                                values.link = `<a href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            }
                        }
                    } else if(values.link==""){
                        values.link = `<img src=${values.image_url}>`
                    } else {
                        if(values.openNewTab==undefined) {
                            if(this.state.defaultChecked) {
                                values.link = `<a target="_blank" href=${values.link} ><img src=${values.image_url}></a>`
                            } else if(!this.state.defaultChecked){
                                values.link = `<a href=${values.link} ><img src=${values.image_url}></a>`
                            }
                        } else if(values.openNewTab==true) {
                            values.link = `<a target="_blank" href=${values.link} ><img src=${values.image_url}></a>`
                        } else if(values.openNewTab==false){
                            values.link = `<a href=${values.link} ><img src=${values.image_url}></a>`
                        }
                    }
                }else {
                    if(values.link==undefined && values.openNewTab==undefined){
                        if(this.state.defaultLink==null){
                            values.link = `<img src=${values.image_url}>`
                        }else {
                            if(this.state.defaultChecked) {
                                values.link = `<a target="_blank" href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            } else if(!this.state.defaultChecked){
                                values.link = `<a href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            }
                        }
                    } else if(values.link==undefined){
                        if(this.state.defaultLink==null){
                            values.link = `<img src=${values.image_url}>`
                        }else {
                            if(values.openNewTab==true) {
                                values.link = `<a target="_blank" href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            } else {
                                values.link = `<a href=${this.state.defaultLink} ><img src=${values.image_url}></a>`
                            }
                        }
                    } else if(values.link==""){
                        values.link = `<img src=${values.image_url}>`
                    } else {
                        if(values.openNewTab==undefined) {
                            if(this.state.defaultChecked) {
                                values.link = `<a target="_blank" href=${values.link} ><img src=${values.image_url}></a>`
                            } else if(!this.state.defaultChecked){
                                values.link = `<a href=${values.link} ><img src=${values.image_url}></a>`
                            }
                        } else if(values.openNewTab==true) {
                            values.link = `<a target="_blank" href=${values.link} ><img src=${values.image_url}></a>`
                        } else if(values.openNewTab==false) {
                            values.link = `<a href=${values.link} ><img src=${values.image_url}></a>`
                        }
                    }
                }
            } else if(this.state.type=="link"){
                if((values.name==undefined || values.name=="") && values.link==undefined && values.openNewTab==undefined){
                    values.name=undefined;
                }else if(values.name==undefined || values.name==""){
                    values.name=this.state.name
                    if(values.link==undefined){
                        if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else {
                            values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else if(values.link==""){
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else {
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${values.link} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${values.link} >${values.name}</a>`
                        }
                    }
                }else {
                    if(values.link==undefined){
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else if(values.link==""){
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${this.state.defaultLink} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${this.state.defaultLink} >${values.name}</a>`
                        }
                    }else {
                        if(values.openNewTab==undefined){
                            if(this.state.defaultChecked){
                                values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                            }else if(!this.state.defaultChecked){
                                values.link=`<a href=${values.link} >${values.name}</a>`
                            }
                        }else if(values.openNewTab==true){
                            values.link=`<a target="_blank" href=${values.link} >${values.name}</a>`
                        }else if(values.openNewTab==false){
                            values.link=`<a href=${values.link} >${values.name}</a>`
                        }
                    }
                }
            }
        }

        //发送新增请求，成功返回ok,反正error
        this.setState({spinStatus:true},()=>{
            setTimeout(()=>{
                this.result = API.updateLink({
                    sortNum: values.sortNum,
                    linkId: this.state.linkId,
                    type:this.state.type,
                    // name values中已有
                    // link values中已有
                    name:values.name,
                    link:values.link,
                    image_url:values.image_url
                });
                if(this.result=="ok"){
                    if(!this.hasFlashed){
                        //只有返回成功后，才会置父组件的状态值为true，即Modal关闭后实现列表刷新
                        this.props.result(true)
                        //执行上一步后，再本组件也加一个标记，来标识已经重置了父组件的刷新状态值status
                        this.hasFlashed = true;
                    }
                }
                this.setState({spinStatus:false})
            },1000)
        })
    };

    onReset = () => {
        this.setState({status:'N'})
        this.formRef.current.resetFields();
    };

    onChange =(value)=> {
        if(typeof value == "number" && value>0){
            if(this.props.data.sortNum==value){
                this.setState({status:'N'})
            }else {
                let tmpStatus = API.sortNumLink({
                    sortNum:value,
                    linkType:this.state.type
                })
                if(tmpStatus=='Y'){
                    this.setState({status:'Y'})
                    this.setState({sortNum:value})
                }else {
                    this.setState({status:'N'})
                }
            }
        }
        console.log('changed', value);
    }

    render() {

        return (
            <Spin spinning={this.state.spinStatus} tip="正在修改......">
                <Form
                    ref={this.formRef}
                    name="control-ref"
                    onFinish={this.onFinish}
                    onReset={this.onReset}
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 17,
                    }}
                    layout="horizontal"
                    initialValues={{
                        ['sortNum']: this.state.sortNum
                    }}
                >
                    {this.state.type=="link"?
                        <Form.Item
                            name="name"
                            label="别名"
                        >
                            <Input defaultValue={this.state.name}/>
                        </Form.Item>
                        :
                        <Form.Item
                            name="image_url"
                            label="图片"
                        >
                            <PicturesWall defaultValue={this.obj} render={this.getImageUrl}/>
                        </Form.Item>
                    }
                    <Form.Item
                        name={"link"}
                        label={"链接"}
                        // rules={[
                        //     ({ getFieldValue }) => ({
                        //         validator(_, value) {
                        //             let result;
                        //             if(value!=undefined || value!=""){
                        //                 result = value.match(/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|\:|\&|-)+)/g)
                        //             }
                        //             if (result!=undefined || result!=null || value==undefined || value=="") {
                        //                 return Promise.resolve();
                        //             }
                        //             return Promise.reject(new Error("必须含有http://或https://前缀"));
                        //         },
                        //     }),
                        // ]}
                    >
                        <Input defaultValue={this.state.defaultLink}></Input>
                    </Form.Item>
                    <Form.Item label="排序" name="sortNum"  validateStatus={this.state.status=='Y'? "warning":null} help={this.state.status=='Y'?`序号冲突，提交会将该笔数据序号置为${this.state.sortNum}` : null }>
                        {/*<InputNumber min={1}/>*/}
                        <InputNumber min={1} defaultValue={this.state.sortNum} onChange={this.onChange}/>
                    </Form.Item>
                    <Form.Item
                        name={"openNewTab"}
                        label={"开启新窗口"}
                    >
                        <Switch defaultChecked={this.state.defaultChecked} onChange={this.onChange} />
                    </Form.Item>
                    <Form.Item
                        label="提交"
                        name="commit"
                    >
                        <Button type="primary" disabled={this.state.spinStatus} htmlType="submit">
                            提交
                        </Button>
                        <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </Spin>
        );
    }
}













// import {Input, InputNumber, Modal} from "antd";
// import SelectRole from "./SelectRole";
// import React from "react";
//
// <span>用户工号</span>
// <Input placeholder="Basic usage" />
//     <span>用户备注</span>
// <InputNumber placeholder="Basic usage" />
// <span style={{display:"block"}}>用户角色</span>
// <SelectRole />

